<!-- App下载页面 -->
<template>
  <div class="mail-app-page">
    <!-- 顶部导航 -->
    <header class="top-nav">
      <div class="nav-container">
        <div class="nav-left">
          <img
            src="@/assets/images/logo.png"
            alt="贵港文旅+"
            class="nav-logo"
          />
          <div class="brand-wrapper">
            <span class="brand-name">贵港文旅+</span>
            <span class="brand-pinyin">GUIGANGWENLV+</span>
          </div>
          <span class="divider">|</span>
          <span class="nav-title">你的专业文旅助手</span>
        </div>
        <div class="nav-right">
          <router-link to="/" class="nav-link">贵港文旅首页</router-link>
          <router-link to="/download/app" class="nav-link"
            >手机App下载</router-link
          >
          <router-link to="/download/desktop" class="nav-link"
            >电脑客户端下载</router-link
          >
          <router-link to="/merchant/apply" class="nav-link"
            >商家入驻</router-link
          >
          <router-link to="/help/guide" class="nav-link">帮助</router-link>
          <router-link to="/feedback" class="nav-link">反馈</router-link>
          <router-link to="/login" class="nav-link login-link"
            >去登录</router-link
          >
        </div>
      </div>
    </header>

    <!-- 主要内容区 -->
    <div class="main-container">
      <div class="content-wrapper">
        <div class="download-container">
          <div class="content-wrapper">
            <!-- 左侧内容 -->
            <div class="left-content">
              <div class="brand">
                <img
                  src="@/assets/images/logo.png"
                  alt="贵港文旅+"
                  class="brand-logo"
                />
                <div class="brand-info">
                  <h1 class="brand-name">贵港文旅+</h1>
                  <p class="brand-slogan">你的专业文旅助手</p>
                </div>
              </div>

              <div class="app-info">
                <div class="version-info">
                  <span class="version">最新版本：2.0.0</span>
                  <span class="update-date">更新日期：2024-03-20</span>
                  <span class="size">大小：45.8MB</span>
                </div>

                <div class="download-options">
                  <div class="qr-code-section">
                    <div class="qr-code">
                      <img
                        src="https://via.placeholder.com/128"
                        alt="下载二维码"
                      />
                    </div>
                    <p class="scan-tip">扫描二维码下载</p>
                  </div>

                  <div class="download-buttons">
                    <a
                      href="#"
                      class="download-btn android"
                      @click.prevent="handleDownload('android')"
                    >
                      <el-icon><Platform /></el-icon>
                      <div class="btn-text">
                        <span class="small">下载</span>
                        <span class="large">Android 版本</span>
                      </div>
                    </a>
                    <a
                      href="#"
                      class="download-btn ios"
                      @click.prevent="handleDownload('ios')"
                    >
                      <el-icon><Apple /></el-icon>
                      <div class="btn-text">
                        <span class="small">下载</span>
                        <span class="large">iOS 版本</span>
                      </div>
                    </a>
                  </div>
                </div>
              </div>

              <div class="feature-list">
                <div
                  class="feature-item"
                  v-for="feature in features"
                  :key="feature.id"
                >
                  <div class="feature-icon">
                    <el-icon><component :is="feature.icon" /></el-icon>
                  </div>
                  <div class="feature-content">
                    <h3>{{ feature.title }}</h3>
                    <p>{{ feature.description }}</p>
                  </div>
                </div>
              </div>
            </div>

            <!-- 右侧手机预览 -->
            <div class="right-content">
              <div class="phone-preview">
                <div class="phone-frame">
                  <div class="phone-header">
                    <div class="phone-notch">
                      <div class="notch-camera"></div>
                      <div class="notch-speaker"></div>
                    </div>
                  </div>
                  <div class="phone-screen">
                    <div class="status-bar">
                      <div class="status-left">
                        <span class="time">12:00</span>
                      </div>
                      <div class="status-right">
                        <span class="signal">
                          <el-icon><Connection /></el-icon>
                        </span>
                        <span class="wifi">
                          <el-icon><Monitor /></el-icon>
                        </span>
                        <span class="battery">
                          <el-icon><Cellphone /></el-icon>
                        </span>
                      </div>
                    </div>
                    <div class="app-screen">
                      <img
                        src="@/assets/images/preview/app-preview.png"
                        alt="App预览"
                        class="preview-image"
                      />
                    </div>
                  </div>
                  <div class="phone-footer">
                    <div class="home-indicator"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="page-footer">
      <div class="footer-info">
        <span>贵港文旅版权所有 ©2024</span>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import {
  Platform,
  Apple,
  Compass,
  Ticket,
  Location,
  ChatLineRound,
  Bell,
  Star,
  Connection,
  Monitor,
  Cellphone,
} from "@element-plus/icons-vue";

const features = [
  {
    id: 1,
    icon: "Compass",
    title: "智能导览",
    description: "智能规划路线，景点实时导航",
  },
  {
    id: 2,
    icon: "Ticket",
    title: "一键预订",
    description: "景点门票快捷预订，免排队入园",
  },
  {
    id: 3,
    icon: "ChatLineRound",
    title: "AI讲解",
    description: "智能语音讲解，深入了解景点文化",
  },
  {
    id: 4,
    icon: "Bell",
    title: "实时资讯",
    description: "景区动态实时推送，及时获取信息",
  },
];

const handleDownload = (platform) => {
  ElMessage({
    message: "应用正在开发中，敬请期待！",
    type: "info",
  });
};
</script>

<style lang="scss" scoped>
.mail-app-page {
  @apply min-h-screen flex flex-col relative;
  background: url("@/assets/images/register-bg.jpg") center/cover fixed
    no-repeat;
  height: 100vh;
  overflow: hidden;

  &::before {
    content: "";
    @apply fixed inset-0 z-0;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0) 64px,
      rgba(255, 255, 255, 0) calc(100% - 64px),
      rgba(255, 255, 255, 0.9) 100%
    );
    pointer-events: none;
  }

  .top-nav {
    @apply w-full fixed top-0 left-0 z-50;

    .nav-container {
      @apply max-w-7xl mx-auto h-16 flex items-center justify-between;
      padding-left: 16px;
      padding-right: 8px;

      .nav-left {
        @apply flex items-center;

        .nav-logo {
          @apply h-14 mr-2;
        }

        .brand-wrapper {
          @apply flex flex-col justify-center;

          .brand-name {
            @apply text-2xl font-bold text-gray-800 leading-6;
          }

          .brand-pinyin {
            @apply text-[8px] text-gray-500 mt-0.5;
          }
        }

        .divider {
          @apply mx-3 text-gray-300 text-xl;
        }

        .nav-title {
          @apply text-gray-700 text-lg font-medium;
        }
      }

      .nav-right {
        @apply flex items-center;
        gap: 24px;

        .nav-link {
          @apply text-sm text-gray-600 hover:text-[#2e74e5] transition-colors;
        }
      }
    }
  }

  .main-container {
    @apply flex-1 mt-16 mb-16 mx-auto w-full max-w-7xl;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    overflow-y: auto;
    padding: 3rem;

    .content-wrapper {
      @apply flex items-center justify-between gap-16 max-w-6xl mx-auto;

      .download-container {
        @apply min-h-full;

        .content-wrapper {
          @apply flex gap-8;

          .left-content {
            @apply flex-1 max-w-2xl;

            .brand {
              @apply flex items-center gap-6 mb-12;

              .brand-logo {
                @apply h-14 mr-2;
              }

              .brand-info {
                .brand-name {
                  @apply text-4xl font-bold text-gray-900 mb-2;
                  background: linear-gradient(to right, #2563eb, #3b82f6);
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
                }

                .brand-slogan {
                  @apply text-lg text-gray-600;
                }
              }
            }

            .app-info {
              @apply space-y-10;

              .version-info {
                @apply flex gap-10 mb-12;

                .info-item {
                  @apply flex items-center gap-3 text-gray-600 text-lg;

                  .el-icon {
                    @apply text-2xl text-gray-400;
                  }
                }
              }

              .download-options {
                @apply flex items-start gap-12;

                .qr-code-section {
                  @apply text-center;

                  .qr-code {
                    @apply w-36 h-36 p-3 bg-white rounded-2xl shadow-lg mb-3;

                    img {
                      @apply w-full h-full;
                    }
                  }

                  .scan-tip {
                    @apply text-base text-gray-600;
                  }
                }

                .download-buttons {
                  @apply flex flex-col gap-4;
                  width: 200px;

                  .download-btn {
                    @apply flex items-center gap-3 px-5 py-2.5 rounded-xl text-white text-base
                           transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5;

                    &.android {
                      @apply bg-green-500 hover:bg-green-600;
                    }

                    &.ios {
                      @apply bg-gray-900 hover:bg-gray-800;
                    }

                    .el-icon {
                      @apply text-xl;
                    }

                    .btn-text {
                      @apply flex flex-col;

                      .small {
                        @apply text-xs opacity-80;
                      }

                      .large {
                        @apply text-sm font-medium;
                      }
                    }
                  }
                }
              }
            }

            .feature-list {
              @apply grid grid-cols-2 gap-8 mt-16;

              .feature-item {
                @apply flex items-start gap-5 p-8 bg-white rounded-2xl shadow-lg
                       transform transition-all duration-300 hover:shadow-xl hover:scale-105;

                .feature-icon {
                  @apply w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center;

                  .el-icon {
                    @apply text-3xl text-blue-500;
                  }
                }

                .feature-content {
                  h3 {
                    @apply text-xl font-semibold text-gray-900 mb-3;
                  }

                  p {
                    @apply text-base text-gray-600 leading-relaxed;
                  }
                }
              }
            }
          }

          .right-content {
            @apply w-[320px] flex-shrink-0 sticky top-8;

            .phone-preview {
              @apply relative;
              margin-top: -60px;

              &::before {
                content: "";
                @apply absolute -inset-8 bg-gradient-to-r from-blue-500/10 to-indigo-500/10
                       rounded-[40px] blur-2xl;
              }

              .phone-frame {
                @apply relative bg-[#111111] rounded-[45px] p-2 shadow-2xl
                       transform transition-all duration-300;
                aspect-ratio: 9/19;
                border: 1px solid rgba(255, 255, 255, 0.12);
                box-shadow:
                  0 0 0 1px rgba(255, 255, 255, 0.1),
                  0 4px 8px rgba(0, 0, 0, 0.4),
                  0 8px 16px rgba(0, 0, 0, 0.3),
                  0 16px 32px rgba(0, 0, 0, 0.2);
                transform: perspective(1000px) rotateY(-8deg) translateY(-4px);

                &:hover {
                  transform: perspective(1000px) rotateY(0deg) translateY(-4px);
                }

                // 音量按钮
                &::before {
                  content: "";
                  @apply absolute -left-1 top-20 w-[3px] h-16 bg-[#222] rounded-l-lg;
                  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.15);
                }

                // 电源按钮
                &::after {
                  content: "";
                  @apply absolute -right-1 top-24 w-[3px] h-12 bg-[#222] rounded-r-lg;
                  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.15);
                }

                .phone-header {
                  @apply relative h-6;

                  .phone-notch {
                    @apply absolute left-1/2 -translate-x-1/2 top-0
                           w-[90px] h-[22px] bg-[#111111] rounded-b-[20px]
                           flex items-center justify-center gap-2;

                    .notch-camera {
                      @apply w-2 h-2 rounded-full;
                      background: radial-gradient(
                        circle at center,
                        #333 40%,
                        #222 60%
                      );
                      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
                    }

                    .notch-speaker {
                      @apply w-8 h-[2px] rounded-full;
                      background: #222;
                      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
                    }
                  }
                }

                .phone-screen {
                  @apply bg-white rounded-[38px] overflow-hidden h-full;

                  .status-bar {
                    @apply flex items-center justify-between px-4 py-1 bg-white;

                    .status-left {
                      .time {
                        @apply text-xs font-medium text-gray-900;
                      }
                    }

                    .status-right {
                      @apply flex items-center gap-1;

                      span {
                        @apply text-gray-900;

                        .el-icon {
                          @apply text-[10px];
                        }
                      }
                    }
                  }

                  .app-screen {
                    @apply h-[calc(100%-24px)] bg-gray-50 overflow-hidden;

                    .preview-image {
                      @apply w-full h-full object-cover;
                    }
                  }
                }

                .phone-footer {
                  @apply absolute bottom-1 left-1/2 -translate-x-1/2;

                  .home-indicator {
                    @apply w-20 h-[3px] rounded-full;
                    background: rgba(0, 0, 0, 0.3);
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .page-footer {
    @apply w-full py-6 text-center fixed bottom-0 left-0 z-50;
    background: transparent;

    .footer-info {
      @apply text-sm text-gray-500;
    }
  }
}

@media (max-width: 1536px) {
  .mail-app-page {
    .main-container {
      @apply px-8;

      .content-wrapper {
        @apply gap-12;

        .right-content {
          @apply w-[500px] fixed right-8;
        }
      }
    }
  }
}

@media (max-width: 1280px) {
  .mail-app-page {
    .main-container {
      .content-wrapper {
        @apply flex-col items-center;

        .left-content {
          @apply max-w-3xl w-full;

          .download-options {
            @apply justify-center;
          }
        }

        .right-content {
          @apply w-[300px] static mt-16 relative;
          margin-top: 2rem;
          right: auto;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .mail-app-page {
    .main-container {
      @apply px-4 py-6;

      .content-wrapper {
        .left-content {
          .brand {
            @apply mb-8;

            .brand-logo {
              @apply w-16 h-16;
            }

            .brand-info {
              .brand-name {
                @apply text-3xl;
              }
            }
          }

          .version-info {
            @apply flex-wrap gap-4 mb-8;

            .info-item {
              @apply text-base;
            }
          }

          .download-options {
            @apply flex-col items-center gap-8;

            .qr-code-section {
              .qr-code {
                @apply w-32 h-32;
              }
            }

            .download-buttons {
              width: 100%;
              max-width: 200px;

              .download-btn {
                @apply px-4 py-2;
              }
            }
          }

          .feature-list {
            @apply grid-cols-1 gap-4;

            .feature-item {
              @apply p-6;
            }
          }
        }

        .right-content {
          @apply w-[260px];
        }
      }
    }
  }
}
</style>
